<template>
	<view class="submintDocument">
		<view class="bgff-show" style="padding: 0rpx 20rpx 0rpx;margin-bottom: 20rpx;">
			<view class="" style="padding: 40rpx 0rpx 40rpx;">
				<x-submitPrintTop :img="img" :title="title" :yul="false"></x-submitPrintTop>
			</view>
			<!-- height: 658rpx-->
			<scroll-view scroll-y="true" style=" ;" v-if="wxImg">
				<view class="flex" style="flex-wrap: wrap;">
					<block v-for="(item,index) in wxImg" :key="index">
						<view class="left-img just-between" @click="submitBolen && previe(index)"
							style="position: relative;">
							<image :src="item"></image>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="bgff-show" style="padding: 0rpx 40rpx 50rpx;">
			<view class="" style="padding: 42rpx 0rpx;">
				<view class="just-between">
					<view class="color-9">
						打印份数
					</view>
					<view class="">
						<u-number-box v-model="num" @change="submitBolen && valChange()"
							@blur="submitBolen && valblur()" @minus="submitBolen && minus()"
							@plus="submitBolen &&plus()" min="1"></u-number-box>
					</view>

				</view>
			</view>
			<x-line></x-line>
			<view class="" style="padding: 42rpx 0rpx 0rpx;">
				<view class="just-between">
					<view class="color-9">
						支付金额
					</view>
					<view class="">
						￥{{dataPrice}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 30rpx;">
			<x-submitButton @submit="submit"></x-submitButton>
		</view>
		<!--上传成功后的弹窗 -->
		<x-popu :show="showPay">
			<!-- 主标题 -->
			<template slot="content">
				{{titlesshow}}
			</template>
			<!-- 副标题 -->
			<template slot="contentItem">
				{{titleItem}}
			</template>
		</x-popu>
	</view>
</template>
<script>
	import {
		easyImg
	} from '@/utils/applet/chooseImgPrint.js'
	// 获取价格
	import {
		TotalAmount
	} from "@/api/TotalAmount.js"
	// 预支付
	import {
		SubmitOrder
	} from "@/api/SubmitOrder.js"
	// 取消订单支付
	import {
		noorder
	} from "@/api/noOrder.js"
	export default {
		data() {
			return {
				titlesshow: '',
				titleItem: '',
				showPay: false, //显示支付完毕的弹窗
				submitBolen: true, //全局控制点击事件  提交之后就不可以在点击操作
				img: '../../static/photo@2x.png',
				title: "生活照片",
				num: 1, //默认计时器的数值
				wxImg: [], //图片数组
				pages: '', //页数
				sku: '', //参数sku  vuex获取
				orderId: '', //订单id
				saleQty: '', //张数
				dataPrice: '', //价格
				unionId: '', //openid本地存储的键名 值为unionId
				unifyO: {}, //后端返回的支付的参数
			}
		},
		onLoad(res) {
			uni.showLoading({
				title: '正在检测环境安全...'
			})
			let messageList = JSON.parse(res.messageList);
			this.wxImg = messageList.path
			this.pages = messageList.pages
			this.orderId = messageList.orderId
			this.sku = this.$store.state.sku[0].SKUId
			this.unionId = uni.getStorageSync('openid');
			this.TotalAmount();
		},
		onShow() {
			if (wx.canIUse('hideHomeButton')) {
				wx.hideHomeButton()
			}
		},
		methods: {
			// 生活照拿着页数获取张数   (页数*数量=总页数)
			TotalAmount() {
				TotalAmount({
					postdata: [{
						"field": "orderId",
						"value": this.orderId
					}, {
						"field": "SKUId",
						"value": this.sku
					}, {
						"field": "itemQty", //页数为照片的张数
						"value": this.pages * this.num,
					}, {
						"field": "itemAuxQty", //份数
						"value": this.num
					}]
				}).then(res => {
					console.log(res, '价格')
					this.dataPrice = parseInt(res.data.totalAmount); //价格(每张的价格和所有的张数和   不包含份数)
					this.saleQty = res.data.saleQty; //张数
					uni.hideLoading()
				})
			},
			// A4纸张A3设置
			addselect(index) {
				console.log(index, 'A4纸张A3设置')
			},
			// 颜色设置
			selectcolor(index) {
				console.log(index, '颜色设置')
			},
			// 基础设置
			selectlongface(index) {
				console.log(index, '基础设置')
			},
			addselect(index) {
				console.log(index, 'A4A3切换')
			},
			valChange() {
				this.TotalAmount();
				console.log('change')
			},
			minus() {
				this.TotalAmount();
			},
			plus() {
				this.TotalAmount();
			},
			valblur() {
				this.TotalAmount();
				console.log('bluer')
			},
			previe(index) {
				// 预览图片 还未提交的时候可以删除 提交点击后发送到服务器过程不可以删除
				easyImg(this.wxImg, index)
			},
			// 提交订单
			submit() {
				this.submitBolen = false;
				uni.showLoading({
					title: '检测支付环境...'
				})
				SubmitOrder({
					postdata: [{
							"field": "orderId", //订单id
							"value": this.orderId,
						}, {
							"field": "SKUId", //skuid
							"value": this.sku,
						}, {
							"field": "itemQty", //页数
							// "value": (this.wxImg.length / this.saleQty) * this.num
							"value": this.pages * this.num
						},
						{
							"field": "itemSaleQty", //张数
							"value": this.saleQty
						},
						{
							"field": "itemAuxQty", //份数
							"value": this.num
						}, {
							"field": "tradeType", //支付方式，终端为空，小程序支付：JSAPI
							"value": "JSAPI"
						}, {
							"field": "openId", //支付方式为JSAPI必传
							"value": this.unionId
						}
					]
				}).then(res => {
					console.log(res, '参数')
					this.unifyO = res.data.unifyOrderResponse;
					uni.hideLoading();
					/////////////////支付参数
					uni.requestPayment({
						timeStamp: this.unifyO.timeStamp,
						nonceStr: this.unifyO.nonceStr,
						package: this.unifyO.prepayId,
						signType: 'MD5',
						paySign: this.unifyO.sign,
						success: (res) => {
							this.titlesshow = '付款成功'; //主标题
							this.titleItem = '点击确定操作打印机'; //副标题
							this.showPay = true; //显示退出的弹窗    
						},
						fail: (res) => {
							uni.showToast({
								title: '支付失败',
								icon: "error"
							})
							noorder({
								postdata: [{
									"field": "orderId", //订单id
									"value": this.orderId
								}]
							}).then(res => {
								this.submitBolen = true,
									console.log(res, '取消支付')
							})
						}
					})
				}).catch()
			}
		}
	}
</script>

<style>
	.submintDocument {
		margin: 10rpx 30rpx 0rpx;
	}

	.left-img {
		/* margin: 15rpx 0rpx; */
		margin: 15rpx 10rpx 15rpx 10rpx;
		width: 196rpx;
		/* height: 237rpx; */
		height: 260rpx;
		/* border: 0.1px solid red; */
		/* margin: 0rpx 11rpx 40rpx 4rpx; */
		padding: 0rpx 10rpx 0rpx 10rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		/* box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 0.5); */
		box-shadow: 0px 0px 8px 0px rgba(145, 122, 128, 0.5);
		border-radius: 5px;
	}
</style>
